<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表页面</title>
    <!--导入Jquery的js库-->
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

        <table id="tableJson" width="500px" height="400px" align="center" border="1px" cellspacing="0">
            <tr>
                <th>商品编号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品描述</th>
            </tr>

        </table>
</body>
<script>
    //页面载入事件
    $(function(){

        var tableJson = $("#tableJson") ;
        $.ajax({
            url:"/Servlet_Mybatis_Spring_war/findAllShop", //后台接口地址
            type:"get",
            success: function(data){ //data:服务器响应过来成功的数据

                $(data).each(function(){
                    var item = "<tr>" +
                        "<td>"+this.shopId+"</td>" +
                        "<td>"+this.shopName+"</td>" +
                        "<td>"+this.shopPrice+"</td>" +
                        "<td>"+this.shopDesc+"</td>" +
                        "</tr>" ;

                    tableJson.append(item) ;

                })
            },
            dataType: "json" //服务器想响应过来的数据格式
        }) ;
    });

</script>
</html>